// # variables -  The scss file which defines the common scss attribute

// # THIS FILE IS PART OF BOOTSTRAP PROJECT.IT IS RELEASED AND IS LICENSED UNDER MIT. https://github.com/twbs/bootstrap/tree/v4.1.3/scss/_variables.scss

// # Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

// # Copyright (c) 2011-2022 The Bootstrap Authors


$f-white: #fff !default;
$f-gray-100: #f8f9fa !default;
$f-gray-200: #e9ecef !default;
$f-gray-300: #dee2e6 !default;
$f-gray-400: #ced4da !default;
$f-gray-500: #adb5bd !default;
$f-gray-600: #6c757d !default;
$f-gray-700: #495057 !default;
$f-gray-800: #343a40 !default;
$f-gray-900: #212529 !default;
$f-black: #000 !default;

$f-grays: (
  ) !default;
$f-grays: map-merge(("100": $f-gray-100,
      "200": $f-gray-200,
      "300": $f-gray-300,
      "400": $f-gray-400,
      "500": $f-gray-500,
      "600": $f-gray-600,
      "700": $f-gray-700,
      "800": $f-gray-800,
      "900": $f-gray-900),
    $f-grays
);


$f-blue: #007bff !default;
$f-indigo: #6610f2 !default;
$f-purple: #6f42c1 !default;
$f-pink: #e83e8c !default;
$f-red: #dc3545 !default;
$f-orange: #fd7e14 !default;
$f-yellow: #ffc107 !default;
$f-green: #28a745 !default;
$f-teal: #20c997 !default;
$f-cyan: #17a2b8 !default;

$f-colors: (
  ) !default;
$f-colors: map-merge(("blue": $f-blue,
      "indigo": $f-indigo,
      "purple": $f-purple,
      "pink": $f-pink,
      "red": $f-red,
      "orange": $f-orange,
      "yellow": $f-yellow,
      "green": $f-green,
      "teal": $f-teal,
      "cyan": $f-cyan,
      "white": $f-white,
      "gray": $f-gray-600,
      "gray-dark": $f-gray-800),
    $f-colors
);

$f-primary: $f-blue !default;
$f-secondary: $f-gray-600 !default;
$f-success: $f-green !default;
$f-info: $f-cyan !default;
$f-warning: $f-yellow !default;
$f-danger: $f-red !default;
$f-light: $f-gray-100 !default;
$f-dark: $f-gray-800 !default;

$f-theme-colors: (
  ) !default;
$f-theme-colors: map-merge(("primary": $f-primary,
      "secondary": $f-secondary,
      "success": $f-success,
      "info": $f-info,
      "warning": $f-warning,
      "danger": $f-danger,
      "light": $f-light,
      "dark": $f-dark),
    $f-theme-colors
);

$f-theme-color-interval: 8% !default;

$f-rgb-threshold: 150 !default;
$f-rgb-result-text-dark: $f-gray-900 !default;
$f-rgb-result-text-light: $f-white !default;

$f-has-cursor-line: true !default;
$f-has-radius: true !default;
$f-has-shadows: false !default;
$f-has-gradients: false !default;
$f-has-transitions: true !default;
$f-has-grid-classes: true !default;
$f-has-print-styles: true !default;


// Space
$f-spacer: 1rem !default;
$f-spacers: (
  ) !default;
$f-spacers: map-merge((0: 0,
      1: ($f-spacer * .25),
      2: ($f-spacer * .5),
      3: $f-spacer,
      4: ($f-spacer * 1.5),
      5: ($f-spacer * 3)),
    $f-spacers
);

$f-sizes: (
  ) !default;
$f-sizes: map-merge((25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto),
    $f-sizes
);

// Body
$f-body-bg: $f-white !default;
$f-body-color: $f-gray-900 !default;

// Links
$f-link-color: f-theme-color("primary") !default;
$f-link-decoration: none !default;
$f-link-hover-color: f-color-offset($f-link-color, 15%, 'darken') !default;
$f-link-hover-decoration: underline !default;

// Paragraphs
$f-paragraph-margin-bottom: 1rem !default;


$f-grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 888px,
  xl: 1200px,
  el: 1690px) !default;

@include f-map-is-ascending($f-grid-breakpoints, "$f-grid-breakpoints"
);



$f-container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px) !default;

@include f-map-is-ascending($f-container-max-widths, "$f-container-max-widths"
);


// Grid columns
$f-grid-columns: 12 !default;
$f-grid-gutter-width: 1.875rem !default;

// Components
$f-line-height-lg: 1.5 !default;
$f-line-height-sm: 1.5 !default;

$f-border-width: 1px !default;
$f-border-color: $f-gray-300 !default;

$f-custom-border-radius: .25rem !default;
$f-custom-border-radius-lg: .3rem !default;
$f-custom-border-radius-sm: .2rem !default;

$f-has-box-shadow-sm: 0 .125rem .25rem rgba($f-black, .075) !default;
$f-has-box-shadow: 0 .5rem 1rem rgba($f-black, .15) !default;
$f-has-box-shadow-lg: 0 1rem 3rem rgba($f-black, .175) !default;

$f-component-active-color: $f-white !default;
$f-component-active-bg: f-theme-color("primary") !default;

$f-cursor-line-width: .3em !default;

$f-transition-base: all .2s ease-in-out !default;
$f-transition-fade: opacity .15s linear !default;
$f-transition-collapse: height .35s ease !default;


// Fonts
$f-font-family-sans-serif: -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  sans-serif,
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  "Noto Color Emoji" !default;
$f-font-family-monospace: SFMono-Regular,
  Menlo,
  Monaco,
  Consolas,
  "Liberation Mono",
  "Courier New",
  monospace !default;
$f-font-family-base: $f-font-family-sans-serif !default;
$f-font-size-base: 1rem !default;
$f-font-size-lg: (
  $f-font-size-base * 1.25) !default;
$f-font-size-sm: (
  $f-font-size-base * .875) !default;

$f-font-weight-light: 300 !default;
$f-font-weight-normal: 400 !default;
$f-font-weight-bold: 700 !default;

$f-font-weight-base: $f-font-weight-normal !default;
$f-line-height-base: 1.5 !default;

$f-h1-font-size: $f-font-size-base * 2.5 !default;
$f-h2-font-size: $f-font-size-base * 2 !default;
$f-h3-font-size: $f-font-size-base * 1.75 !default;
$f-h4-font-size: $f-font-size-base * 1.5 !default;
$f-h5-font-size: $f-font-size-base * 1.25 !default;
$f-h6-font-size: $f-font-size-base !default;

$f-headings-margin-bottom: (
  $f-spacer / 2) !default;
$f-headings-font-family: inherit !default;
$f-headings-font-weight: 400 !default;
$f-headings-line-height: 1.2 !default;
$f-headings-color: inherit !default;

$f-display1-size: 6rem !default;
$f-display2-size: 5.5rem !default;
$f-display3-size: 4.5rem !default;
$f-display4-size: 3.5rem !default;

$f-display1-weight: 300 !default;
$f-display2-weight: 300 !default;
$f-display3-weight: 300 !default;
$f-display4-weight: 300 !default;
$f-display-line-height: $f-headings-line-height !default;

$f-lead-font-size: (
  $f-font-size-base * 1.25) !default;
$f-lead-font-weight: 300 !default;

$f-small-font-size: 80% !default;

$f-text-muted: $f-gray-600 !default;

$f-blockquote-small-color: $f-gray-600 !default;
$f-blockquote-font-size: (
  $f-font-size-base * 1.25) !default;

$f-hr-border-color: rgba($f-black, .1) !default;
$f-hr-border-width: $f-border-width !default;

$f-mark-padding: .2em !default;

$f-dt-font-weight: $f-font-weight-bold !default;

$f-kbd-box-shadow: inset 0 -.1rem 0 rgba($f-black, .25) !default;
$f-nested-kbd-font-weight: $f-font-weight-bold !default;

$f-list-inline-padding: .5rem !default;

$f-mark-bg: #fcf8e3 !default;

$f-hr-margin-y: $f-spacer !default;


// Tables
$f-table-cell-padding: .75rem !default;
$f-table-cell-padding-sm: .3rem !default;

$f-table-bg: transparent !default;
$f-table-accent-bg: rgba($f-black, .05) !default;
$f-table-hover-bg: rgba($f-black, .075) !default;
$f-table-active-bg: $f-table-hover-bg !default;

$f-table-border-width: $f-border-width !default;
$f-table-border-color: $f-gray-300 !default;

$f-table-head-bg: $f-gray-200 !default;
$f-table-head-color: $f-gray-700 !default;

$f-table-dark-bg: $f-gray-900 !default;
$f-table-dark-accent-bg: rgba($f-white, .05) !default;
$f-table-dark-hover-bg: rgba($f-white, .075) !default;
$f-table-dark-border-color: f-color-offset($f-gray-900, 7.5%, 'lighten') !default;
$f-table-dark-color: $f-body-bg !default;

$f-table-striped-order: odd !default;

$f-table-caption-color: $f-text-muted !default;

// Buttons + Forms
$f-btn-font-size: $f-font-size-base !default;
$f-input-btn-padding-y: .375rem !default;
$f-input-btn-padding-x: .75rem !default;
$f-input-btn-line-height: $f-line-height-base !default;

$f-input-btn-focus-width: .2rem !default;
$f-input-btn-focus-color: rgba($f-component-active-bg, .25) !default;
$f-input-btn-focus-box-shadow: 0 0 0 $f-input-btn-focus-width $f-input-btn-focus-color !default;

$f-input-btn-padding-y-sm: .25rem !default;
$f-input-btn-padding-x-sm: .5rem !default;
$f-input-btn-line-height-sm: $f-line-height-sm !default;

$f-input-btn-padding-y-lg: .5rem !default;
$f-input-btn-padding-x-lg: 1rem !default;
$f-input-btn-line-height-lg: $f-line-height-lg !default;

$f-input-btn-border-width: $f-border-width !default;


// Buttons
$f-btn-padding-y: $f-input-btn-padding-y !default;
$f-btn-padding-x: $f-input-btn-padding-x !default;
$f-btn-line-height: $f-input-btn-line-height !default;

$f-btn-padding-y-sm: $f-input-btn-padding-y-sm !default;
$f-btn-padding-x-sm: $f-input-btn-padding-x-sm !default;
$f-btn-line-height-sm: $f-input-btn-line-height-sm !default;

$f-btn-padding-y-lg: $f-input-btn-padding-y-lg !default;
$f-btn-padding-x-lg: $f-input-btn-padding-x-lg !default;
$f-btn-line-height-lg: $f-input-btn-line-height-lg !default;

$f-btn-border-width: $f-input-btn-border-width !default;

$f-btn-font-weight: $f-font-weight-normal !default;
$f-btn-box-shadow: inset 0 1px 0 rgba($f-white, .15),
  0 1px 1px rgba($f-black, .075) !default;
$f-btn-focus-width: $f-input-btn-focus-width !default;
$f-btn-focus-box-shadow: $f-input-btn-focus-box-shadow !default;
$f-btn-disabled-opacity: .65 !default;
$f-btn-active-box-shadow: inset 0 3px 5px rgba($f-black, .125) !default;

$f-btn-link-disabled-color: $f-gray-600 !default;

$f-btn-block-spacing-y: .5rem !default;
$f-btn-border-radius: $f-custom-border-radius !default;
$f-btn-border-radius-lg: $f-custom-border-radius-lg !default;
$f-btn-border-radius-sm: $f-custom-border-radius-sm !default;

$f-btn-transition: color .15s ease-in-out,
  background-color .15s ease-in-out,
  border-color .15s ease-in-out,
  box-shadow .15s ease-in-out !default;


// Forms
$f-label-margin-bottom: .5rem !default;

$f-input-padding-y: $f-input-btn-padding-y !default;
$f-input-padding-x: $f-input-btn-padding-x !default;
$f-input-line-height: $f-input-btn-line-height !default;

$f-input-padding-y-sm: $f-input-btn-padding-y-sm !default;
$f-input-padding-x-sm: $f-input-btn-padding-x-sm !default;
$f-input-line-height-sm: $f-input-btn-line-height-sm !default;

$f-input-padding-y-lg: $f-input-btn-padding-y-lg !default;
$f-input-padding-x-lg: $f-input-btn-padding-x-lg !default;
$f-input-line-height-lg: $f-input-btn-line-height-lg !default;

$f-input-bg: $f-white !default;
$f-input-disabled-bg: $f-gray-200 !default;

$f-input-color: $f-gray-700 !default;
$f-input-border-color: $f-gray-400 !default;
$f-input-border-width: $f-input-btn-border-width !default;
$f-input-box-shadow: inset 0 1px 1px rgba($f-black, .075) !default;

$f-input-border-radius: $f-custom-border-radius !default;
$f-input-border-radius-lg: $f-custom-border-radius-lg !default;
$f-input-border-radius-sm: $f-custom-border-radius-sm !default;

$f-input-focus-bg: $f-input-bg !default;
$f-input-focus-border-color: f-color-offset($f-component-active-bg, 25%, 'lighten') !default;
$f-input-focus-color: $f-input-color !default;
$f-input-focus-width: $f-input-btn-focus-width !default;
$f-input-focus-box-shadow: $f-input-btn-focus-box-shadow !default;

$f-input-placeholder-color: $f-gray-600 !default;
$f-input-plaintext-color: $f-body-color !default;

$f-input-height-border: $f-input-border-width * 2 !default;

$f-input-height-inner: (
  $f-font-size-base * $f-input-btn-line-height)+($f-input-btn-padding-y * 2) !default;
$f-input-height: calc(#{$f-input-height-inner} + #{$f-input-height-border}) !default;

$f-input-height-inner-sm: (
  $f-font-size-sm * $f-input-btn-line-height-sm)+($f-input-btn-padding-y-sm * 2) !default;
$f-input-height-sm: calc(#{$f-input-height-inner-sm} + #{$f-input-height-border}) !default;

$f-input-height-inner-lg: (
  $f-font-size-lg * $f-input-btn-line-height-lg)+($f-input-btn-padding-y-lg * 2) !default;
$f-input-height-lg: calc(#{$f-input-height-inner-lg} + #{$f-input-height-border}) !default;

$f-input-transition: border-color .15s ease-in-out,
  box-shadow .15s ease-in-out !default;

$f-form-text-margin-top: .25rem !default;

$f-form-check-input-gutter: 1.25rem !default;
$f-form-check-input-margin-y: .3rem !default;
$f-form-check-input-margin-x: .25rem !default;

$f-form-check-inline-margin-x: .75rem !default;
$f-form-check-inline-input-margin-x: .3125rem !default;

$f-form-group-margin-bottom: 1rem !default;

$f-input-group-addon-color: $f-input-color !default;
$f-input-group-addon-bg: $f-gray-200 !default;
$f-input-group-addon-border-color: $f-input-border-color !default;

$f-custom-forms-transition: background-color .15s ease-in-out,
  border-color .15s ease-in-out,
  box-shadow .15s ease-in-out !default;

$f-custom-control-gutter: 1.5rem !default;
$f-custom-control-spacer-x: 1rem !default;

$f-custom-control-indicator-size: 1rem !default;
$f-custom-control-indicator-bg: $f-gray-300 !default;
$f-custom-control-indicator-bg-size: 50% 50% !default;
$f-custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($f-black, .1) !default;

$f-custom-control-indicator-disabled-bg: $f-gray-200 !default;
$f-custom-control-label-disabled-color: $f-gray-600 !default;

$f-custom-control-indicator-checked-color: $f-component-active-color !default;
$f-custom-control-indicator-checked-bg: $f-component-active-bg !default;
$f-custom-control-indicator-checked-disabled-bg: rgba(f-theme-color("primary"), .5) !default;
$f-custom-control-indicator-checked-box-shadow: none !default;

$f-custom-control-indicator-focus-box-shadow: 0 0 0 1px $f-body-bg,
  $f-input-btn-focus-box-shadow !default;

$f-custom-control-indicator-active-color: $f-component-active-color !default;
$f-custom-control-indicator-active-bg: f-color-offset($f-component-active-bg, 35%, 'lighten') !default;
$f-custom-control-indicator-active-box-shadow: none !default;

$f-custom-checkbox-indicator-border-radius: $f-custom-border-radius !default;
$f-custom-checkbox-indicator-icon-checked: f-str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$f-custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;

$f-custom-checkbox-indicator-indeterminate-bg: $f-component-active-bg !default;
$f-custom-checkbox-indicator-indeterminate-color: $f-custom-control-indicator-checked-color !default;
$f-custom-checkbox-indicator-icon-indeterminate: f-str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$f-custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$f-custom-checkbox-indicator-indeterminate-box-shadow: none !default;

$f-custom-radio-indicator-border-radius: 50% !default;
$f-custom-radio-indicator-icon-checked: f-str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$f-custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;

$f-custom-select-padding-y: .375rem !default;
$f-custom-select-padding-x: .75rem !default;
$f-custom-select-height: $f-input-height !default;
$f-custom-select-indicator-padding: 1rem !default;
$f-custom-select-line-height: $f-input-btn-line-height !default;
$f-custom-select-color: $f-input-color !default;
$f-custom-select-disabled-color: $f-gray-600 !default;
$f-custom-select-bg: $f-input-bg !default;
$f-custom-select-disabled-bg: $f-gray-200 !default;
$f-custom-select-bg-size: 0.5rem 0.625rem !default;
$f-custom-select-indicator-color: $f-gray-800 !default;
$f-custom-select-indicator: f-str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$f-custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
$f-custom-select-border-width: $f-input-btn-border-width !default;
$f-custom-select-border-color: $f-input-border-color !default;
$f-custom-select-border-radius: $f-custom-border-radius !default;
$f-custom-select-box-shadow: inset 0 1px 2px rgba($f-black, .075) !default;

$f-custom-select-focus-border-color: $f-input-focus-border-color !default;
$f-custom-select-focus-width: $f-input-btn-focus-width !default;
$f-custom-select-focus-box-shadow: 0 0 0 $f-custom-select-focus-width rgba($f-custom-select-focus-border-color, .5) !default;

$f-custom-select-font-size-sm: 75% !default;
$f-custom-select-height-sm: $f-input-height-sm !default;

$f-custom-select-font-size-lg: 125% !default;
$f-custom-select-height-lg: $f-input-height-lg !default;

$f-custom-range-track-width: 100% !default;
$f-custom-range-track-height: .5rem !default;
$f-custom-range-track-cursor: pointer !default;
$f-custom-range-track-bg: $f-gray-300 !default;
$f-custom-range-track-border-radius: 1rem !default;
$f-custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($f-black, .1) !default;

$f-custom-range-thumb-width: 1rem !default;
$f-custom-range-thumb-height: $f-custom-range-thumb-width !default;
$f-custom-range-thumb-bg: $f-component-active-bg !default;
$f-custom-range-thumb-border: 0 !default;
$f-custom-range-thumb-border-radius: 1rem !default;
$f-custom-range-thumb-box-shadow: 0 .1rem .25rem rgba($f-black, .1) !default;
$f-custom-range-thumb-focus-box-shadow: 0 0 0 1px $f-body-bg,
  $f-input-btn-focus-box-shadow !default;
$f-custom-range-thumb-focus-box-shadow-width: $f-input-btn-focus-width !default; // For focus box shadow issue in IE/Edge
$f-custom-range-thumb-active-bg: f-color-offset($f-component-active-bg, 35%, 'lighten') !default;

$f-custom-file-height: $f-input-height !default;
$f-custom-file-height-inner: $f-input-height-inner !default;
$f-custom-file-focus-border-color: $f-input-focus-border-color !default;
$f-custom-file-focus-box-shadow: $f-input-btn-focus-box-shadow !default;
$f-custom-file-disabled-bg: $f-input-disabled-bg !default;

$f-custom-file-padding-y: $f-input-btn-padding-y !default;
$f-custom-file-padding-x: $f-input-btn-padding-x !default;
$f-custom-file-line-height: $f-input-btn-line-height !default;
$f-custom-file-color: $f-input-color !default;
$f-custom-file-bg: $f-input-bg !default;
$f-custom-file-border-width: $f-input-btn-border-width !default;
$f-custom-file-border-color: $f-input-border-color !default;
$f-custom-file-border-radius: $f-input-border-radius !default;
$f-custom-file-box-shadow: $f-input-box-shadow !default;
$f-custom-file-button-color: $f-custom-file-color !default;
$f-custom-file-button-bg: $f-input-group-addon-bg !default;
$f-custom-file-text: (
  en: "Browse"
  ) !default;


// Form validation
$f-form-feedback-margin-top: $f-form-text-margin-top !default;
$f-form-feedback-font-size: $f-small-font-size !default;
$f-form-feedback-valid-color: f-theme-color("success") !default;
$f-form-feedback-invalid-color: f-theme-color("danger") !default;


// Dropdowns
$f-dropdown-min-width: 10rem !default;
$f-dropdown-padding-y: .5rem !default;
$f-dropdown-padding-x: 0 !default;
$f-dropdown-item-border-radius: 0 !default;
$f-dropdown-spacer: .125rem !default;
$f-dropdown-bg: $f-white !default;
$f-dropdown-border-color: rgba($f-black, .15) !default;
$f-dropdown-border-radius: $f-custom-border-radius !default;
$f-dropdown-border-width: $f-border-width !default;
$f-dropdown-divider-bg: $f-gray-200 !default;
$f-dropdown-box-shadow: 0 .5rem 1rem rgba($f-black, .175) !default;

$f-dropdown-link-color: $f-text-04 !default;
$f-dropdown-link-hover-color: $f-text-04 !default;
$f-dropdown-link-hover-bg: $f-aid-02 !default;

$f-dropdown-link-active-color: $f-component-active-color !default;
$f-dropdown-link-active-bg: $f-component-active-bg !default;

$f-dropdown-link-disabled-color: $f-gray-600 !default;

$f-dropdown-item-padding-y: .25rem !default;
$f-dropdown-item-padding-x: 1.5rem !default;

$f-dropdown-header-color: $f-gray-600 !default;


// Z-index
$f-zindex-dropdown: 300 !default;
$f-zindex-sticky: 1020 !default;
$f-zindex-fixed: 1030 !default;
$f-zindex-modal-backdrop: 1040 !default;
$f-zindex-modal: 1050 !default;
$f-zindex-popover: 1060 !default;
$f-zindex-tooltip: 1070 !default;

// Navs
$f-nav-link-padding-y: .5rem !default;
$f-nav-link-padding-x: 1rem !default;
$f-nav-link-disabled-color: $f-gray-600 !default;

$f-nav-tabs-border-color: $f-gray-300 !default;
$f-nav-tabs-border-width: $f-border-width !default;
$f-nav-tabs-border-radius: $f-custom-border-radius !default;
$f-nav-tabs-link-hover-border-color: $f-gray-200 $f-gray-200 $f-nav-tabs-border-color !default;
$f-nav-tabs-link-active-color: $f-gray-700 !default;
$f-nav-tabs-link-active-bg: $f-body-bg !default;
$f-nav-tabs-link-active-border-color: $f-gray-300 $f-gray-300 $f-nav-tabs-link-active-bg !default;

$f-nav-pills-border-radius: $f-custom-border-radius !default;
$f-nav-pills-link-active-color: $f-component-active-color !default;
$f-nav-pills-link-active-bg: $f-component-active-bg !default;

$f-nav-divider-color: $f-gray-200 !default;
$f-nav-divider-margin-y: (
  $f-spacer / 2) !default;

// Navbar
$f-navbar-padding-y: (
  $f-spacer / 2) !default;
$f-navbar-padding-x: $f-spacer !default;

$f-navbar-nav-link-padding-x: .5rem !default;

$f-navbar-brand-font-size: $f-font-size-lg !default;
$f-nav-link-height: (
  $f-font-size-base * $f-line-height-base + $f-nav-link-padding-y * 2) !default;
$f-navbar-brand-height: $f-navbar-brand-font-size * $f-line-height-base !default;
$f-navbar-brand-padding-y: (
  $f-nav-link-height - $f-navbar-brand-height) / 2 !default;

$f-navbar-toggler-padding-y: .25rem !default;
$f-navbar-toggler-padding-x: .75rem !default;
$f-navbar-toggler-font-size: $f-font-size-lg !default;
$f-navbar-toggler-border-radius: $f-btn-border-radius !default;

$f-navbar-dark-color: rgba($f-white, .5) !default;
$f-navbar-dark-hover-color: rgba($f-white, .75) !default;
$f-navbar-dark-active-color: $f-white !default;
$f-navbar-dark-disabled-color: rgba($f-white, .25) !default;
$f-navbar-dark-toggler-icon-bg: f-str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$f-navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$f-navbar-dark-toggler-border-color: rgba($f-white, .1) !default;

$f-navbar-light-color: rgba($f-black, .5) !default;
$f-navbar-light-hover-color: rgba($f-black, .7) !default;
$f-navbar-light-active-color: rgba($f-black, .9) !default;
$f-navbar-light-disabled-color: rgba($f-black, .3) !default;
$f-navbar-light-toggler-icon-bg: f-str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$f-navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$f-navbar-light-toggler-border-color: rgba($f-black, .1) !default;

// Pagination
$f-pagination-padding-y: .5rem !default;
$f-pagination-padding-x: .75rem !default;
$f-pagination-padding-y-sm: .25rem !default;
$f-pagination-padding-x-sm: .5rem !default;
$f-pagination-padding-y-lg: .75rem !default;
$f-pagination-padding-x-lg: 1.5rem !default;
$f-pagination-line-height: 1.25 !default;

$f-pagination-color: $f-link-color !default;
$f-pagination-bg: $f-white !default;
$f-pagination-border-width: $f-border-width !default;
$f-pagination-border-color: $f-gray-300 !default;

$f-pagination-focus-box-shadow: $f-input-btn-focus-box-shadow !default;
$f-pagination-focus-outline: 0 !default;

$f-pagination-hover-bg: $f-gray-200 !default;
$f-pagination-hover-border-color: $f-gray-300 !default;

$f-pagination-active-color: $f-component-active-color !default;
$f-pagination-active-bg: $f-component-active-bg !default;
$f-pagination-active-border-color: $f-pagination-active-bg !default;

$f-pagination-disabled-color: $f-gray-600 !default;
$f-pagination-disabled-bg: $f-white !default;
$f-pagination-disabled-border-color: $f-gray-300 !default;



// Cards
$f-card-spacer-y: .75rem !default;
$f-card-spacer-x: 1.25rem !default;
$f-card-border-width: $f-border-width !default;
$f-card-border-radius: $f-custom-border-radius !default;
$f-card-border-color: rgba($f-black, .125) !default;
$f-card-inner-border-radius: calc(#{$f-card-border-radius} - #{$f-card-border-width}) !default;
$f-card-cap-bg: rgba($f-black, .03) !default;
$f-card-bg: $f-white !default;

$f-card-img-overlay-padding: 1.25rem !default;

$f-card-group-margin: (
  $f-grid-gutter-width / 2) !default;
$f-card-deck-margin: $f-card-group-margin !default;

$f-card-columns-count: 3 !default;
$f-card-columns-gap: 1.25rem !default;
$f-card-columns-margin: $f-card-spacer-y !default;


// Tooltips
$f-tooltip-font-size: $f-font-size-sm !default;
$f-tooltip-max-width: 18.75rem !default;
$f-tooltip-max-height: 6.25rem !default;
$f-tooltip-lg-max-width: 37.5rem !default;
$f-tooltip-color: $f-white !default;
$f-tooltip-bg: rgba(0, 0, 0, 0.75) !default;
$f-tooltip-border-radius: $f-custom-border-radius !default;
$f-tooltip-opacity: 1 !default;
$f-tooltip-padding-y: 0.5rem !default;
$f-tooltip-padding-x: 0.625rem !default;
$f-tooltip-margin: 0 !default;

$f-tooltip-arrow-width: .8rem !default;
$f-tooltip-arrow-height: .4rem !default;
$f-tooltip-arrow-color: $f-tooltip-bg !default;


// Popovers
$f-popover-font-size: $f-font-size-sm !default;
$f-popover-bg: $f-white !default;
$f-popover-max-width: 17.25rem !default;
$f-popover-border-width: $f-border-width !default;
$f-popover-border-color: rgba($f-black, .2) !default;
$f-popover-border-radius: $f-custom-border-radius-lg !default;
$f-popover-box-shadow: 0 .25rem .5rem rgba($f-black, .2) !default;

$f-popover-header-bg: darken($f-popover-bg, 3%) !default;
$f-popover-header-color: $f-headings-color !default;
$f-popover-header-padding-y: .5rem !default;
$f-popover-header-padding-x: .75rem !default;

$f-popover-body-color: $f-body-color !default;
$f-popover-body-padding-y: $f-popover-header-padding-y !default;
$f-popover-body-padding-x: $f-popover-header-padding-x !default;

$f-popover-arrow-width: 1rem !default;
$f-popover-arrow-height: .5rem !default;
$f-popover-arrow-color: $f-popover-bg !default;

$f-popover-arrow-outer-color: fade-in($f-popover-border-color, .05) !default;


// Badges
$f-badge-font-size: 75% !default;
$f-badge-font-weight: $f-font-weight-bold !default;
$f-badge-padding-y: .25em !default;
$f-badge-padding-x: .4em !default;
$f-badge-border-radius: $f-custom-border-radius !default;

$f-badge-pill-padding-x: .6em !default;
$f-badge-pill-border-radius: 10rem !default;

// Modals
$f-modal-inner-padding: 1rem !default;
$f-modal-dialog-margin: .5rem !default;
$f-modal-dialog-margin-y-sm-up: 1.75rem !default;
$f-modal-title-line-height: $f-line-height-base !default;
$f-modal-content-bg: $f-white !default;
$f-modal-content-border-color: rgba($f-black, .2) !default;
$f-modal-content-border-width: $f-border-width !default;
$f-modal-content-border-radius: $f-custom-border-radius-lg !default;
$f-modal-content-box-shadow-xs: 0 .25rem .5rem rgba($f-black, .5) !default;
$f-modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($f-black, .5) !default;

$f-modal-backdrop-bg: $f-black !default;
$f-modal-backdrop-opacity: .5 !default;
$f-modal-header-border-color: $f-gray-200 !default;
$f-modal-footer-border-color: $f-modal-header-border-color !default;
$f-modal-header-border-width: $f-modal-content-border-width !default;
$f-modal-footer-border-width: $f-modal-header-border-width !default;
$f-modal-header-padding: 1rem !default;

$f-modal-lg: 50rem !default;
$f-modal-md: 31.25rem !default;
$f-modal-sm: 18.75rem !default;

$f-modal-transition: transform .3s ease-out !default;


// Alerts
$f-alert-padding-y: .75rem !default;
$f-alert-padding-x: 1.25rem !default;
$f-alert-margin-bottom: 1rem !default;
$f-alert-border-radius: $f-custom-border-radius !default;
$f-alert-link-font-weight: $f-font-weight-bold !default;
$f-alert-border-width: $f-border-width !default;

$f-alert-bg-level: -10 !default;
$f-alert-border-level: -9 !default;
$f-alert-color-level: 6 !default;


// Progress
$f-progress-height: 1rem !default;
$f-progress-font-size: (
  $f-font-size-base * .75) !default;
$f-progress-bg: $f-gray-200 !default;
$f-progress-border-radius: $f-custom-border-radius !default;
$f-progress-box-shadow: inset 0 .1rem .1rem rgba($f-black, .1) !default;
$f-progress-bar-color: $f-white !default;
$f-progress-bar-bg: f-theme-color("primary") !default;
$f-progress-bar-animation-timing: 1s linear infinite !default;
$f-progress-bar-transition: width .6s ease !default;

// List
$f-list-group-bg: $f-white !default;
$f-list-group-border-color: rgba($f-black, .125) !default;
$f-list-group-border-width: $f-border-width !default;
$f-list-group-border-radius: $f-custom-border-radius !default;

$f-list-group-item-padding-y: .75rem !default;
$f-list-group-item-padding-x: 1.25rem !default;

$f-list-group-hover-bg: $f-gray-100 !default;
$f-list-group-active-color: $f-component-active-color !default;
$f-list-group-active-bg: $f-component-active-bg !default;
$f-list-group-active-border-color: $f-list-group-active-bg !default;

$f-list-group-disabled-color: $f-gray-600 !default;
$f-list-group-disabled-bg: $f-list-group-bg !default;

$f-list-group-action-color: $f-gray-700 !default;
$f-list-group-action-hover-color: $f-list-group-action-color !default;

$f-list-group-action-active-color: $f-body-color !default;
$f-list-group-action-active-bg: $f-gray-200 !default;


//Thumbnail
$f-thumbnail-padding: .25rem !default;
$f-thumbnail-bg: $f-body-bg !default;
$f-thumbnail-border-width: $f-border-width !default;
$f-thumbnail-border-color: $f-gray-300 !default;
$f-thumbnail-border-radius: $f-custom-border-radius !default;
$f-thumbnail-box-shadow: 0 1px 2px rgba($f-black, .075) !default;


// Figures
$f-figure-caption-font-size: 90% !default;
$f-figure-caption-color: $f-gray-600 !default;


// Close
$f-close-font-size: $f-font-size-base * 1.5 !default;
$f-close-font-weight: $f-font-weight-bold !default;
$f-close-color: $f-black !default;
$f-close-text-shadow: 0 1px 0 $f-white !default;

// Code
$f-code-font-size: 87.5% !default;
$f-code-color: $f-pink !default;
$f-kbd-padding-y: .2rem !default;
$f-kbd-padding-x: .4rem !default;
$f-kbd-font-size: $f-code-font-size !default;
$f-kbd-color: $f-white !default;
$f-kbd-bg: $f-gray-900 !default;
$f-pre-color: $f-gray-900 !default;
$f-pre-scrollable-max-height: 21.25rem !default;


// Print
$f-print-page-size: a3 !default;
$f-print-body-min-width: map-get($f-grid-breakpoints, "lg") !default;